import { CSSProperties, Dispatch, FC, memo, SetStateAction } from "react"
import { SvgComponent } from "@/components/base/Svg"
import DatePicker from "@/components/form_item/DatePicker"
import { createLogger } from "@/utils/logger"
import styled from "@emotion/styled"
import dayjs from "dayjs"
import { useModal } from "../hooks/useModal"
import { Option } from "../types/bet"
import { ModalSelector } from "./ModalSelector"

const logger = createLogger("BetRecordFilterBarWrapper")

const FilterBarWrapper = styled.div`
    display: flex;
    gap: 7rem;
    padding: 0 16rem;
    margin-bottom: 16rem;
    margin-top: 16rem;
`

const Select = styled.div`
    width: 120rem;
    height: 36rem;
    padding-left: 12rem;
    line-height: 36rem;
    border-radius: 8rem;
    box-shadow: 0 0 5rem rgba(0, 0, 0, 0.05);
    position: relative;
    background-color: white;
`

const FilterIcon = styled.span`
    position: absolute;
    right: 12rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
`

const FilterText = styled.span<{ color: CSSProperties["color"] }>`
    color: ${({ color }) => color};
    font-weight: 500;
    font-size: 14rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
`

type FilterProps = {
    status: string
    setStatus: (status: string) => void
    dateStart: string
    setDateStart: Dispatch<SetStateAction<string>>
    dateEnd: string
    setDateEnd: Dispatch<SetStateAction<string>>
    options: Option[]
}

const IconArrowDownSvg = styled(SvgComponent("pages/HomePage/icon_arrow_down.svg"))``
export const BetRecordFilterBar: FC<FilterProps> = memo(
    ({ status, setStatus, setDateStart, setDateEnd, options = [] }) => {
        const openStatusModal = useModal({
            el: (
                <ModalSelector
                    title={"Select Status"}
                    selected={status}
                    options={options}
                    onSelect={setStatus}
                />
            ),
            effects: [],
        })

        return (
            <FilterBarWrapper>
                <Select onClick={() => openStatusModal()}>
                    <FilterText
                        color={"#9FA7BC"}
                        children={options.find(({ value }) => value === status)?.label}
                    />
                    <FilterIcon children={<IconArrowDownSvg />} />
                </Select>
                <DatePicker
                    style={{ flex: 1 }}
                    onChange={({ startDate, endDate }) => {
                        setDateStart(dayjs(startDate).format("MM/DD/YYYY"))
                        setDateEnd(dayjs(endDate).format("MM/DD/YYYY"))
                    }}
                />
            </FilterBarWrapper>
        )
    },
)
